<template>
	<view>
		<view class="shop-detail-container">
			<!-- 顶部商家信息 -->
			<view class="shop-header">
				<view>
					<view class="shop-basic">
						<text class="shop-name">{{ shopInfo.name }}</text>
						<text class="shop-name-mc">MC</text>
					</view>
					<view class="shop-rating">
						<u-row justify="start">
							<u-rate count="5" v-model="shopInfo.rating" active-color='var(--primary-color)' gutter="0" size="14"></u-rate>
							<text class="rating-text">{{shopInfo.rating}}.0</text>
						</u-row>
					</view>
				</view>
				<view class="hours-price">
					<p >
						<span class="title-left"></span>
						<span>商家服务</span>
					</p>
					<view class="shop-hours">
						<!-- <u-icon class="icon" name="clock"></u-icon> -->
						<view>工作时间： {{ shopInfo.businessHours }}</view>
						<view>擅长服务： 综合</view>
					</view>
					<view v-if="detailType==1" class="price-section">
						<text class="price-value">{{ shopInfo.priceRange }}</text>
					</view>
				</view>
				
				<view class="address-box">
					<p>
						<span class="title-left"></span>
						<span>详细地址</span>
					</p>
					<view class="address-section">
						<!-- <u-icon class="icon" name="map"></u-icon> -->
						<text>地址：{{ shopInfo.address }}</text>
					</view>
					<view class="distance-section">
						<text>距离您 {{ shopInfo.distance }}km</text>
					</view>
				</view>
				
				
				
				<view class="contact-section">
					<view class="contact-btn" @tap="contactShop">
						<u-icon class="icon" size="23" color="var(--primary-color)" name="phone"></u-icon>
						<text style="margin-left: 2px;margin-top: -3px;">联系商家</text>
					</view>
					<view v-if="detailType==1" class="order-btn" @tap="createOrder">
						<u-icon class="icon" size="23" color="var(--primary-color)" name="order" ></u-icon>
						<text style="margin-left: 2px;margin-top: -2px;">立即下单</text>
					</view>
				</view>
			</view>
	
			<!-- 商家评价 -->
			<view class="reviews-section">
				<u-row justify="between">
					<text class="section-title">评价</text>
					<text>
						<text style="margin-right: 15px;">全部</text>
						<text style="margin-right: 15px;">好评</text>
						<text>差评</text>
					</text>
				</u-row>
				<view class="review-list">
					<view v-for="(review, index) in reviews" :key="index" class="review-item">
						<view class="review-header">
							<text class="review-phone">{{ review.phone }}</text>
							<u-row justify="start">
								<u-rate count="5" v-model="review.rating" active-color='var(--primary-color)' gutter="0" size="14"></u-rate>
							</u-row>
						</view>
						<text class="review-content">{{ review.content }}</text>
						<view class="review-date">{{ review.date }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup class="picture-upload" :show="showUploadModal" mode="center"  @close="close">
			<view class="upload-modal-content">
				<view class="upload-title">图片上传</view>
				<view class="upload-problem">
					<view class="modal-title">问题描述：</view>
					<u--textarea v-model="value1" placeholder="请输入问题描述" ></u--textarea>
				</view>
				<view class="upload-problem">
					<view class="modal-title">图片上传：</view>
					<u-upload
					  :fileList="fileList"
					  @afterRead="afterRead"
					  @delete="deletePic"
					  name="3"
					  multiple
					  :maxCount="10"
					  :previewFullImage="true"
					></u-upload>
				</view>
				<view class="upload-btn">
					<button class="btn1" @click="submitOrder">确认</button>
					<button class="btn2" @click="close">取消</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
  data() {
    return {
			detailType:1,
			id:'',
      shopInfo: {
        id: 1,
        name: 'XXXXXX',
        rating: 4,
        businessHours: '8:00-18:00',
        priceRange: '10~15$/h',
        address: '钱塘区下沙月雅路206-210号',
        distance: '20.32'
      },
      reviews: [
        {
          phone: '187****5140',
          date: '2024-08-12',
          content: '价格合适，服务态度好，非常推荐',
					rating:2
        },
        {
          phone: '187****5140',
          date: '2024-08-12',
          content: '价格合适，服务态度好，非常推荐',
					rating:4
        },
        {
          phone: '187****5140',
          date: '2024-08-12',
          content: '价格合适，服务态度好，非常推荐',
					rating:5
        }
      ],
			fileList:[],
			showUploadModal: false,
			imageUrl: '',
			value1:"",
			tempFiles: null, // 临时存储文件对象
			orderInfo: {
				shopId: '',
				remark: '',
				images: []
			}
		}
  },
  onLoad(options) {
		this.detailType=options.type
		this.id=options.id
    // 从列表页传递的商家ID
    if (options.id) {
      this.loadShopData(options.id)
    }
  },
  methods: {
    loadShopData(id) {
      // 实际项目中这里应该调用API获取商家详情
      console.log('加载商家数据，ID:', id)
      // this.$request.get('/shop/detail', { id }).then(res => {
      //   this.shopInfo = res.data.shopInfo
      //   this.reviews = res.data.reviews
      // })
    },
    contactShop() {
      uni.makePhoneCall({
        phoneNumber: '18700005140' // 示例号码
      })
    },
   
		// 原有方法保持不变，新增以下方法：
		createOrder() {
			this.orderInfo.shopId = this.shopInfo.id
			this.showUploadModal = true
		},
		close(){
			this.showUploadModal = false
			this.fileList =[]
		},
		chooseImage() {
			uni.chooseImage({
				count: 1, // 默认1张
				sizeType: ['compressed'], // 压缩图
				sourceType: ['album', 'camera'], // 相册和相机
				success: (res) => {
					this.imageUrl = res.tempFilePaths[0]
					this.tempFiles = res.tempFiles
				}
			})
		},
		    
		submitOrder() {
			if (!this.fileList.length>0) {
				uni.showToast({
					title: '请上传图片',
					icon: 'none'
				})
				return
			}
			
			// 这里应该是上传图片到服务器的逻辑
			// 示例代码，实际项目中需要替换为您的API调用
			uni.uploadFile({
				url: 'https://your-api-domain.com/upload',
				filePath: this.imageUrl,
				name: 'file',
				formData: {
					shopId: this.shopInfo.id
				},
				success: (uploadRes) => {
					const resData = JSON.parse(uploadRes.data)
					if (resData.code === 200) {
						uni.showToast({
							title: '下单成功',
							icon: 'success'
						})
						this.close()
					}
				},
				fail: () => {
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					})
				}
			})
		},
	// 删除图片
		deletePic(event) {
			this.fileList.splice(event.index, 1);
		},
	      // 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this.fileList.length;
			lists.map((item) => {
				this.fileList.push({
					...item,
					status: "uploading",
					message: "上传中",
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this.fileList[fileListLen];
				this.fileList.splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: "success",
						message: "",
						url: result,
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
					filePath: url,
					name: "file",
					formData: {
						user: "test",
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					},
				});
			});
		},
	}
}
</script>

<style scoped lang="scss">

.title-left{
	border-left:3px solid var(--primary-color);
	margin-right: 5px;
	display: inline-block;
	height: 10px;
}
.picture-upload{
	color: #333;
	.upload-modal-content {
		width: 80vw;
		padding: 1.3rem;
		text-align: center;
		.upload-title{
			font-size: 1.1rem;
			font-weight: 600;
			padding-top: 1rem;
		}
		.upload-problem{
			text-align: left;
			.modal-title {
				margin-bottom: 1rem;
				padding-top: 1.1rem;
			}
		}
		.upload-btn{
			display: flex;
			justify-content: right;
			margin-top: 1.1rem;
			.btn1 ,.btn2{
				font-size: 1rem;
				padding: 0 2rem;
				border-radius: 50rpx;
				margin: 0.6rem ;
				border: 1rpx solid #f0f0f0;
				color:#999;
			}
			.btn1{
				background-color: #ff9900;
				color: #fff;
				border: 0;
			}
			.btn1::after,.btn2::after {
				border: 0 !important;
			}
		}
		
	}
}
.shop-detail-container {
  min-height: 100vh;
	.shop-header>view{
		padding: 1rem; 
		margin-bottom: 2px;
	}
	.shop-header {
		background-color: var(--primary-backgrond-color);
	  margin-bottom: 0.8rem;
		.shop-basic {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
			margin-top: 14rpx;
			font-weight: bold;
			.shop-name {
			  font-size: 1.1rem;
				color: var(--text-color-b);
			}
			.shop-name-mc{
				font-size: 0.6rem;
				color: #fff;
				padding:2px 5px ;
				margin-left: 10px;
				border-radius: 10px;
				background-color:var(--primary-color) ;
				font-weight: 400;
			}
		}
		.shop-rating {
		  display: flex;
		  align-items: center;
			color: var(--text-color-g);
			font-size: 0.9rem;
			.rating-text {
			  color: var(--primary-color);
			  margin-left: 10rpx;
			}
		}
	}
	
	.hours-price{
		// display: flex;
		// justify-content: space-between;
		font-size: 1rem;
		.shop-hours {
		  // display: flex;
		  // align-items: center;
		  color: var(--text-color-g);
			margin-top: 0.8rem;
			margin-left: 0.4rem;
			>view{
				margin-top: 3px;
			}
			.icon{
				margin-right: 4px;
			}
		}
		.price-section {
		  display: flex;
		  align-items: center;
			justify-content: end;
			.price-value {
				font-size: 1rem;
			  color: #e33;
				font-weight: bold;
			}
		}
	}
	
	.address-section {
	  margin:10px 0.4rem 15rpx;
		color: var(--text-color-g);
		.icon{
			margin-right: 4px;
		}
	}
	.distance-section {
		display: flex;
		justify-content: end;
	  color: var(--text-color-g);
	  font-size: 0.9rem;
		margin-left: 21px;
	}
	.contact-section {
		color: var(--text-color-b);
	  display: flex;
	  justify-content: end;
	  margin-bottom: 30rpx;
		.contact-btn, .order-btn {
			display: flex;
			margin: 10px;
			margin-left: 2rem;
			text-align: center;
			font-size: 1rem;
			.u-icon{
				margin: 0 auto;
				margin-bottom: 10px;
			}
			.u-icon--right{
				flex-direction: column;
			}
		}
	}
}

.reviews-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
	color: var(--text-color-b);
	.section-title {
	  font-size: 1.1rem;
	  font-weight: bold;
	  display: block;
	}
	.review-item {
	  padding: 20rpx 0;
	  border-bottom: 1rpx solid var(--primary-backgrond-color);
		.review-header {
		  display: flex;
		  justify-content: space-between;
		  margin-bottom: 10rpx;
		}
	}
	.review-content {
		color: var(--text-color-g);
	  font-size: 0.9rem;
	}
	.review-date {
	  color: var(--text-color-g);
	  font-size: 0.8rem;
		text-align: right;
		margin-top: 10px;
	}
}


</style>
<style scoped>

</style>